<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Content Editor Proof of Concept</title>
	<link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
    <link type="text/css" href="controls/colorpicker/css/colorpicker.css" rel="Stylesheet" />
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="controls/colorpicker/js/colorpicker.js"></script>
    <script type="text/javascript" src="js/jquery.json-2.3.js"></script>
    <script type="text/javascript" src="ContentEditorPOC1.html.js"></script>
    <style>
       html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
        table {border-collapse: collapse; border-spacing: 0;}
        caption, th, td {text-align: left; font-weight: normal;}
        table, td, th {vertical-align: middle;}
        blockquote:before, blockquote:after, q:before, q:after {content: "";}
        blockquote, q {quotes: "" "";}
        a img {border: none;}
        :focus {outline: 0;}
        
        html {
	        height: 100%;
	        padding-bottom: 1px; /* force scrollbars */
        }

        body {
	        background: #FFF;
	        color: #444;
	        font: normal 75% Georgia;
	        line-height: 1.5;
        }
        
        h3 { font-family: Georgia; padding: 4px 0 4px; font-size: 11px; }
        #wrapper { width: 1203px; height: 681px; margin: 0px auto;}
        #canvasWrapper { margin: 10px; float: left; height: 519px; width: 807px; padding: 0px;}
        #EditingCanvas { height: 100%; width: 100%; margin:0;}
        #RightColumn { margin: 10px; float: right; height: 528px; width: 303px; }
        #ObjectProperty { height: 285px; width: 276px; float: left; padding: 0.5em; }
        #ObjectProperty h3 { text-align: center; margin: 0px; }
        #ObjectSet { float: left; height: 204px; width: 276px; margin-top: 19px; padding: 0.5em; }
        #ObjectSet h3 { text-align: center; margin: 0px; }
        
        .ObjectSetItem {padding: 0; margin: 10px; }
        .ObjectSetItem img { height: 48px; width: 48px; }
        
        .CanvasTextObject { height: 100%; width: 100%; resize: none; overflow: hidden; border: none; outline: none; font-family: Georgia; font-size: 11px; }
        .CanvasAudioObject { margin: 10px; cursor: move; }
        .CanvasVideoObject { margin: 10px; cursor: move; }
        .CanvasImageObject { height: 100%; width: 100%; cursor: move; }
        .CanvasImageFrame { height: 132px; width: 132px; margin: 10px; padding: 4px; cursor: move; }
        .CanvasObjectContainer { height: 100px; width: 100px; padding: 10px; cursor: move; margin: 10px; }
        
        #toolbarWrapper { margin-left: 29px; margin-right: 24px; margin-top: 4px; }
        
        table {margin-bottom: 1.4em; width: 100%;}
        th {font-weight: bold;}
        thead th {background: #C3D9FF;}
        th,td,caption {padding: 4px 10px 4px 5px;}
        tr.even td {background: #F2F6FA;}
        tfoot {font-style: italic;}
        caption {background: #EEE;}

        table.data-table {
	        border: 1px solid #d5f0fc;
	        margin-bottom: 2em;
	        width: 100%;
        }

        table.data-table th {
	        background: #f4fbfe;
	        border: 1px solid #d5f0fc;
	        color: #7e8d8c;
	        text-align: left;
        }

        table.data-table th.hcenter {
	        background: #f4fbfe;
	        border: 1px solid #d5f0fc;
	        color: #7e8d8c;
	        text-align: center;
        }

        table.data-table th.hright {
	        background: #f4fbfe;
	        border: 1px solid #d5f0fc;
	        color: #7e8d8c;
	        text-align: right;
        }

        table.data-table tr {border-bottom: 1px solid #d5f0fc;}
        table.data-table td, table th {padding: 10px;}
        table.data-table th.minspacer {padding: 5px 10px 5px 10px;}
        table.data-table td {
	        color: #7e8d8c;
	        background: #f8fdfe;
	        border: 1px solid #d5f0fc;
        }
        table.data-table tr.even td {background: #FCFCFC;}
        
        label {
	        cursor: pointer;
	        font-weight: bold;
        }
        label.checkbox, label.radio {font-weight: normal;}
        legend {
	        font-weight: bold;
	        font-size: 1.2em;
        }
        textarea {overflow: auto;}
        input.text, select {
	        border: 1px solid #AAA;
	        margin: 0.5em 0;
	        padding: 4px 5px;
        }
        input.text:focus, select:focus {background: #FFF6BF; color: #514721;}
        .mediumLength{
	        width: 300px;
	        height: 20px;
        }

        input.button {
	        font-weight: bold;
	        height: 24px;
	        background: #DDD;
	        border: 1px solid #AAA;
	        padding: 4px 5px;
	        cursor: pointer;
        }
        input.button:active {border-style: inset;}
        input.button:hover {background-color: #F4FBFE;}
    </style>
</head>
<body>
    <!--div id="wrapper"-->
        <div id="canvasWrapper">
            <div id="EditingCanvas" class="ui-widget-content ui-corner-all">
            </div>
        </div>
        <div id="RightColumn">
            <div id="ObjectProperty" class="ui-widget-content ui-corner-all">
                <h3 class="ui-widget-header ui-corner-all">Object Properties</h3>
                <table id="PropertiesTable" class="data-table ui-corner-all" style="margin-top: 10px;">
                    <tr id="notSelectedRow">
                        <td colspan="2">
                            No Object Selected.
                        </td>
                    </tr>
                    <tr id="idRow">
                        <th>Object Id</th>
                        <td id="lblId"></td>
                    </tr>
                    <tr id="typeRow" class="even">
                        <th>Type</th>
                        <td id="lblObjType"></td>
                    </tr>
                    <tr id="sourceRow">
                        <th>Source</th>
                        <td><input type="text" id="txtSource" name="txtSource" class="text ui-corner-all" readonly="readonly" />
                        <input type="button" id="btnSource" class="button ui-corner-all" value="..." /></td>
                    </tr>
                    <tr id="autoplayRow" class="even">
                        <th>Autoplay</th>
                        <td><input type="checkbox" id="chkAutoplay" name="chkAutoplay" class="checkbox" /></td>
                    </tr>
                    <tr id="altTextRow" class="even">
                        <th>Alt Text</th>
                        <td><input type="text" class="text ui-corner-all" id="txtAltText" name="txtAltText" /></td>
                    </tr>
                    <tr id="fontRow">
                        <th>Font</th>
                        <td><input type="button" id="btnFontEditor" class="button ui-corner-all" value="..." /></td>
                    </tr>
                    <tr id="colorRow" class="even">
                        <th>Color</th>
                        <td><input id="txtColor" name="txtColor" type="text" class="text ui-corner-all" value="#000000" /></td>
                    </tr>
                    <tr id="dimensionRow">
                        <th>Dimension</th>
                        <td><input type="button" id="btnDimensionEditor" name="btnDimensionEditor" class="button ui-corner-all" value="..." /></td>
                    </tr>
                </table>
            </div>
            <div id="ObjectSet" class="ui-widget-content ui-corner-all">
                <h3 class="ui-widget-header ui-corner-all">Canvas Object</h3>
                <div id="toolbarWrapper">
                <div id="objText" class="ObjectSetItem"><img src="icons/textblock.png" alt="" /></div>
                <div id="objAudio" class="ObjectSetItem"><img src="icons/audio.png" alt="" /></div>
                <div id="objVideo" class="ObjectSetItem"><img src="icons/video.png" alt="" /></div>
                <div id="objImage" class="ObjectSetItem"><img src="icons/image.png" alt="" /></div>
                </div>
            </div>
        </div>
        <div id="confirmDeleteDialog" title="Delete Object">
	        <p style="font-size: 11px;"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Selected item will be deleted and cannot be recovered. Are you sure?</p>
        </div>
        <div id="fontEditorDialog" title="Font Settings">
               <label for="cmbFontName">Font Name</label><br />
               <select name="cmbFontName" id="cmbFontName" class="ui-corner-all" style="width: 100%">
                   <option value="Georgia" selected="selected">Georgia</option>
                   <option value="Tahoma">Tahoma</option>
                   <option value="Verdana">Verdana</option>
                   <option value="Arial">Arial</option>
               </select><br /><br />
               <label for="txtFontSize">Font Size</label><br />
               <input type="number" class="text ui-corner-all" name="txtFontSize" id="txtFontSize" style="width: 95%" min="1"/><br /><br />
               <label for="cmbFontWeight">Font Weight</label><br />
               <select name="cmbFontWeight" id="cmbFontWeight" class="ui-corner-all" style="width: 100%">
                    <option value="normal" selected="selected">Normal</option>
                    <option value="lighter">Lighter</option>
                    <option value="bold">Bold</option>
                    <option value="bolder">Bolder</option>
               </select><br /><br />
               <label for="cmbTextDecoration">Text Decoration</label><br />
               <select name="cmbTextDecoration" id="cmbTextDecoration" class="ui-corner-all" style="width: 100%">
                    <option value="overline" selected="selected">Overline</option>
                    <option value="line-through">Line-Through</option>
                    <option value="underline">Underline</option>
                    <option value="none">None</option>
               </select><br /><br />
               <label for="cmbFontStyle">Font Style</label><br />
               <select name="cmbFontStyle" id="cmbFontStyle" class="ui-corner-all" style="width: 100%">
                    <option value="normal" selected="selected">Normal</option>
                    <option value="italic">Italic</option>
                    <option value="oblique">Oblique</option>
               </select>
        </div>
        <div id="dimensionEditorDialog" title="Object Dimensions">
            <label id="lblHeight" for="txtHeight">Height</label><br />
            <input type="number" id="txtHeight" name="txtHeight" class="text ui-corner-all" style="width: 95%" min="50"/><br /><br />
            <label id="lblWidth" for="txtWidth">Width</label><br />
            <input type="number" id="txtWidth" name="txtWidth" class="text ui-corner-all" style="width: 95%" min="50"/><br /><br />
            <label for="txtLocX">Location X</label><br />
            <input type="number" id="txtLocX" name="txtLocX" class="text ui-corner-all" style="width: 95%" min="11"/><br /><br />
            <label for="txtLocY">Location Y</label><br />
            <input type="number" id="txtLocY" name="txtLocY" class="text ui-corner-all" style="width: 95%" min="11"/>
        </div>
        <form id="uploader" style="visibility:hidden" action="../Learning/Controller/ContentManagementService.asmx/uploadMedia" method="post" enctype="multipart/form-data" target="uploadResults">
            <input type="hidden" id="fldMediaType" name="mediaType" value="" />
        </form>
        <div id="uploads" style="visibility: hidden">
            
        </div>
        <iframe id="uploadResults" name="uploadResults" style="visibility: hidden">
        </iframe>
        <div>
            <input type="button" id="btnUpload" name="btnUpload" value="Upload" class="button ui-corner-all" />
            <input type="button" id="btnCommit" name="btnCommit" value="Commit" class="button ui-corner-all" />
        </div>
    <!--/div-->
</body>
</html>